// App.js
import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import DescribeUserPage from "../components/01-describe-user-page";
import ManagementStatus from "../components/03-management-status";
import EmergencyPlan from "../components/04-emergency-plan";
import AddInteractivity from "../components/02-add-interactivity";

// 定义几个简单的组件
const Page1 = () => <DescribeUserPage></DescribeUserPage>;
const Page2 = () => <AddInteractivity></AddInteractivity>;
const Page3 = () => <ManagementStatus></ManagementStatus>;
const Page4 = () => <EmergencyPlan></EmergencyPlan>;

const MRouter = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/describe-user-page">描述用户界面</Link>
          </li>
          <li>
            <Link to="/add-interactivity">添加交互性</Link>
          </li>
          <li>
            <Link to="/manager-status">管理状态</Link>
          </li>
          <li>
            <Link to="/emergency-plan">应急方案</Link>
          </li>
        </ul>
        <Routes>
          <Route path="/describe-user-page" element={<Page1 />} />
          <Route path="/add-interactivity" element={<Page2 />} />
          <Route path="/manager-status" element={<Page3 />} />
          <Route path="/emergency-plan" element={<Page4 />} />
        </Routes>
      </div>
    </Router>
  );
};

export default MRouter;
